{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

  <el-form-item label="广告位名称" prop="app_id">
	<el-select v-model="form.app_id" clearable placeholder="请选择客户端">
		<el-option
		  v-for="item in app_list"
		  :key="item.app_id"
		  :label="item.app_name"
		  :value="item.app_id">
		</el-option>
	</el-select>
  </el-form-item>

  <el-form-item label="广告位名称" prop="title">
    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
  </el-form-item>

  <el-form-item label="别名" prop="alias">
    <el-input v-model="form.alias" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Alias"></el-input>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">别名是读取广告位的唯一标识</p>
  	</small>
  </el-form-item>

  <el-form-item label="状态" prop="status">
    <el-radio-group v-model="form.status">
      <el-radio :label="1">启用[默认]</el-radio>
      <el-radio :label="0">禁用</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="开始时间" prop="start_time">
    <el-date-picker
      v-model="form.start_time"
      align="right"
      type="date"
      format="yyyy-M-d"
      value-format="yyyy-M-d"
      placeholder="选择日期"
      :default-value="Date.now()"
      :picker-options="{
	        	disabledDate: (time) => {return time.getTime() < Date.now();}
	        }">
    </el-date-picker>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">为空则手动控制</p>
  	</small>
  </el-form-item>

  <el-form-item label="结束时间" prop="end_time">
    <el-date-picker
      v-model="form.end_time"
      align="right"
      type="date"
      placeholder="选择日期"
      format="yyyy-M-d"
      value-format="yyyy-M-d"
      :default-value="Date.now()"
      :picker-options="{
	        	disabledDate: (time) => {return time.getTime() < Date.now();}
	        }">
    </el-date-picker>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">为空则手动控制</p>
  	</small>
  </el-form-item>

  <el-form-item label="建议尺寸" prop="size">
    <el-input v-model="form.width" class="col-12 col-sm-1 pl-0 pr-0" placeholder="宽"></el-input>
    <el-input v-model="form.height" class="col-12 col-sm-1 pl-0 pr-0" placeholder="高"></el-input>
  	<small class="text-muted mt-2 d-block">
  		<p class="mb-0">不填则使用系统内置</p>
  	</small>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="app_list"}
	var app_list=[];
	{else/}
	var app_list={:json_encode($app_list,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/ads/addPosition';
	var is_edit=false;
	var formData={
				app_id:'',
				title:'',
				alias:'',
				status:1,
				start_time:'',
				end_time:'',
				width:'',
				height:'',
			};
	{else/}
	var url='/ads/editPosition/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			form:formData,
			app_list:app_list,
			is_edit:is_edit,
	        rules: {
	          app_id: [
	            { required: true, message: '请选择客户端', trigger: 'change' },
	          ],
	          title: [
	            { required: true, message: '请输入广告位名称', trigger: 'blur' },
	            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
	          ],
	          alias: [
	            { required: true, message: '请输入别名', trigger: 'blur' },
	          ],
	          status: [
	            { required: true, message: '请选择状态', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}